@use "sass:color";
@use "sass:math";

@use '../tools/variables';
@use '../tools/colors';

@use '../ui/config/spacing.scss';

@use './modals';

$torrent-details--header--secondary--foreground: modals.$modal--body--foreground;

$torrent-details--table--foreground: modals.$modal--body--foreground;
$torrent-details--table--header: rgba(modals.$modal--body--foreground, 0.5);
$torrent-details--table--header--count--background: rgba(modals.$modal--body--foreground, 0.2);
$torrent-details--table--header--count--foreground: modals.$modal--body--foreground;

$torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
$torrent-details--header--progress-bar--fill: modals.$modal--body--foreground;

$torrent-details--detail--heading--foreground: color.adjust(modals.$modal--body--foreground, $lightness: 20%);
$torrent-details--detail--label--foreground: color.adjust(modals.$modal--body--foreground, $lightness: 2%);

$directory-tree--foreground: modals.$modal--body--foreground;
$directory-tree--directory--foreground: modals.$modal--body--foreground;
$directory-tree--directory--foreground--open: color.adjust($directory-tree--directory--foreground, $lightness: 10%);

$directory-tree--group--extension: rgba(#6c7e92, 0.1);

$directory-tree--icon--file: rgba(modals.$modal--body--foreground, 0.4);
$directory-tree--icon--folder: rgba(modals.$modal--body--foreground, 0.4);
$directory-tree--icon--folder--open: $directory-tree--icon--folder;

$directory-tree--file-details--foreground: rgba(modals.$modal--body--foreground, 0.7);
$directory-tree--file-details--hover--foreground: rgba(modals.$modal--body--foreground, 0.8);

$torrent-details--directory-tree--file--hover--background: #2f3844;
$torrent-details--directory-tree--file--hover--foreground: #8799ad;
$torrent-details--directory-tree--file--hover--border: #515f6f;

$torrent-details--directory-tree--file--selected--background: rgba(colors.$blue, 0.1);
$torrent-details--directory-tree--file--selected--foreground: rgba(color.adjust(colors.$blue, $lightness: 5%), 0.9);
$torrent-details--directory-tree--file--selected--hover--background: rgba(colors.$blue, 0.2);
$torrent-details--directory-tree--file--selected--hover--foreground: colors.$blue;
$torrent-details--directory-tree--file--selected--border: rgba(colors.$blue, 0.25);

$torrent-details--directory-tree--parent-directory--foreground: rgba(modals.$modal--body--foreground, 0.6);
$torrent-details--directory-tree--parent-directory--icon--fill: rgba(modals.$modal--body--foreground, 0.5);

$torrent-details--tags--background: #515f6f;
$torrent-details--tags--foreground: #1a2028;

.torrent-details {
  &__heading {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin-top: 0;
    margin-bottom: spacing.$spacing--x-small;
    overflow-wrap: break-word;
  }

  &__sub-heading {
    display: flex;
    flex-wrap: wrap;
    font-weight: 400;
    margin-bottom: math.div(variables.$spacing-unit * 1, 5);

    &__secondary {
      color: $torrent-details--header--secondary--foreground;
      display: flex;
      font-size: 0.85rem;
      flex: 1 0 auto;

      &:first-child {
        justify-content: flex-start;
      }

      &:last-child {
        justify-content: flex-end;
      }
    }

    &__tertiary {
      flex: 0 0 auto;
      margin-right: 1em;

      .icon {
        fill: $torrent-details--header--icon--default--fill;
        height: 12px;
        margin-right: 3px;
        margin-top: -3px;
        vertical-align: middle;
        width: 12px;
      }

      .priority-meter {
        display: inline-block;
        margin-top: -1px;
        margin-right: 6px;
        vertical-align: middle;

        &__wrapper {
          margin-top: -3px;
          padding: 0;
        }
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  &__header {
    &.is-completed,
    &.is-stopped {
      .progress-bar {
        &__icon {
          .icon {
            fill: $torrent-details--header--progress-bar--fill;
          }
        }

        &__fill {
          background: $torrent-details--header--progress-bar--fill;

          &__wrapper {
            &:after {
              background: $torrent-details--header--progress-bar--fill;
            }
          }
        }
      }
    }
  }

  &__action {
    transition: color 0.25s;

    .icon {
      transition: fill 0.25s;
    }

    &:focus {
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }

    &:focus-visible {
      outline: dashed;
    }

    &.is-active {
      color: colors.$blue;

      .icon {
        fill: colors.$blue;
      }
    }
  }

  &__table {
    color: $torrent-details--table--foreground;
    width: 100%;

    &__heading {
      &--primary {
        color: $torrent-details--directory-tree--parent-directory--foreground;
        font-size: 1.125em;
      }

      &--secondary {
        color: $torrent-details--table--header;
        font-size: 0.7em;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      &--tertiary {
        color: $torrent-details--detail--heading--foreground;
        font-weight: 700;
      }
    }
  }

  &__section {
    font-size: 0.8rem;

    &__heading,
    &__null-data {
      color: $torrent-details--directory-tree--parent-directory--foreground;
      font-size: 1.15em;
      margin-bottom: math.div(variables.$spacing-unit * 1, 10);
    }

    &--file-tree {
      margin-left: -8px;

      .directory-tree {
        &__node {
          color: $directory-tree--foreground;
          position: relative;
          transition: background 0.25s, border 0.25s, color 0.25s;

          &--group {
            &:after {
              background: $directory-tree--group--extension;
            }
          }

          &--directory {
            color: $directory-tree--directory--foreground;

            &.is-expanded {
              color: $directory-tree--directory--foreground--open;
              font-weight: 500;

              .icon {
                &--folder {
                  fill: $directory-tree--icon--folder--open;
                }
              }
            }

            .icon {
              &--folder {
                fill: $directory-tree--icon--folder;
              }
            }
          }

          &--selectable {
            position: relative;

            // &:after {
            //   background: $torrent-details--directory-tree--file--hover--border;
            //   bottom: 0;
            //   content: '';
            //   height: auto;
            //   left: -2px;
            //   opacity: 0;
            //   position: absolute;
            //   top: 0;
            //   transition: opacity 0.25s;
            //   width: 2px;
            // }

            &:hover {
              // background: $torrent-details--directory-tree--file--hover--background;
              color: $torrent-details--directory-tree--file--hover--foreground;

              &:after {
                opacity: 0.6;
              }

              .file {
                &__detail {
                  &--size,
                  &--priority {
                    color: $directory-tree--file-details--hover--foreground;
                  }
                }
              }

              .icon {
                &--file {
                  fill: $torrent-details--directory-tree--file--hover--foreground;
                }
              }
            }
          }

          .file {
            width: auto;

            &__detail {
              &--size,
              &--priority {
                color: currentColor;
              }
            }
          }
        }

        .icon {
          fill: $directory-tree--icon--file;
        }

        &__parent-directory {
          color: $torrent-details--directory-tree--parent-directory--foreground;

          .icon {
            &--disk {
              fill: $torrent-details--directory-tree--parent-directory--icon--fill;
            }
          }
        }
      }

      .icon {
        &--file {
          fill: $directory-tree--icon--file;
        }
      }
    }

    .badge {
      background: $torrent-details--table--header--count--background;
      color: $torrent-details--table--header--count--foreground;
    }
  }

  &__detail {
    &--hash {
      .torrent-details__detail__value {
        word-break: break-all;
      }
    }

    &--tags {
      .tag {
        background: $torrent-details--tags--background;
        color: $torrent-details--tags--foreground;
      }
    }

    & + .torrent-details__table__heading {
      .torrent-details__table__heading--tertiary {
        padding-top: 10px;
      }
    }

    &__label,
    &__value {
      vertical-align: top;

      .not-available {
        font-style: italic;
      }
    }

    &__label {
      color: $torrent-details--detail--label--foreground;
      font-weight: 500;
      padding-right: math.div(variables.$spacing-unit * 3, 5);
      white-space: nowrap;
    }
  }
}
